import { debounce } from "lodash-es";
import { VideoState } from "../ws.ts";

import type { ServerEventListener } from "../ws.ts";
import type { ReactiveData } from "../../model.ts";
import type { PlayerInst } from "@/pages/room/components/player/player.ts";

export function createVideoStateListener(
    data: ReactiveData,
    player: PlayerInst,
    triggerAfter: (operator: number, state: VideoState) => void
): ServerEventListener<"video.state"> {
    return debounce((details, event) => {
        switch (details.state) {
            case VideoState.PLAY: {
                player.play(true);
                break;
            }
            case VideoState.PAUSE: {
                player.pause(true);
                break;
            }
            default: {
                break;
            }
        }
        triggerAfter(details.operator, details.state);
    }, 200);
}